import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router'
import axios from 'axios'
import { Spin, Col, Row, Divider, Typography } from 'antd'
import styles from './DetailPage.module.css'
import { Header, Footer, ProductIntro, ProductComments } from '../../components'
import { DatePicker, Space, Button } from 'antd'
import { commentMockData } from './mockup'

import {
  productDetailSlice,
  getProductDetail,
} from '../../redux/productDetail/slice'
import { useSelector } from 'react-redux'
import { useDispatch } from 'react-redux'

import { MainLayout } from '../../layouts/mainLayout'

import { ShoppingCartOutlined } from '@ant-design/icons'
import { addShoppingCartItem } from '../../redux/shoppingCart/slice'
import { useNavigate } from 'react-router-dom'

interface MatchParams {
  touristRouteId?: string
}

export const DetailsPage: React.FC<MatchParams> = () => {
  const { RangePicker } = DatePicker

  const { touristRouteId } = useParams()
  // const [loading, setloading] = useState<boolean>(true)
  // const [product, setProduct] = useState<any>(null)
  // const [error, setError] = useState<string | null>(null)

  const loading = useSelector((state: any) => state.productDetail?.loading)
  const error = useSelector((state: any) => state.productDetail?.error)
  const product = useSelector((state: any) => state.productDetail?.data)

  const token = useSelector((state: any) => state.user.token)
  const shoppingCartloading = useSelector(
    (state: any) => state.shoppingCart.loading
  )

  const shoppingCartloading1 = !shoppingCartloading

  const dispatch = useDispatch()
  const Navigate = useNavigate()

  const addproduc = () => {
    if (!token) {
      Navigate('/login')
    } else {
      dispatch(addShoppingCartItem())
    }
  }

  useEffect(() => {
    if (touristRouteId) {
      dispatch(getProductDetail(touristRouteId) as any)
    }
  }, [])

  if (loading) {
    return (
      <Spin
        size="large"
        style={{
          marginTop: 200,
          marginBottom: 200,
          marginLeft: 'auto',
          marginRight: 'auto',
          width: '100%',
        }}
      />
    )
  }
  if (error) {
    return <div>网站出错：{error}</div>
  }
  return (
    <>
      <MainLayout>
        <div className={styles['page-content']}>
          {/* 产品简介与日期 */}
          <div className={styles['product-detail-container']}>
            <Row>
              <Col span={13}>
                <ProductIntro
                  title={product?.title}
                  shortDescription={product?.description}
                  price={product?.originalPrice}
                  coupons={product?.coupons}
                  points={product?.points}
                  discount={product?.price}
                  rating={product?.rating}
                  pictures={product?.touristRoutePictures.map(
                    (p: any) => p.url
                  )}
                />
              </Col>
              <Col span={11}>
                <Button
                  style={{ marginTop: 50, marginBottom: 30, display: 'block' }}
                  danger
                  // loading={shoppingCartloading1}
                  onClick={() => addproduc()}
                >
                  <ShoppingCartOutlined></ShoppingCartOutlined>
                  放入购物车
                </Button>
                <RangePicker open style={{ marginTop: 20 }} />
              </Col>
            </Row>
          </div>
          {/* 锚点菜单 */}
          <div className={styles['product-detail-anchor']}></div>
          {/* 产品特色 */}
          <div id="feature" className={styles['product-detail-container']}>
            <Divider orientation="center">
              <Typography.Title level={3}>产品特色</Typography.Title>
              <div dangerouslySetInnerHTML={{ __html: product?.feature }}></div>
            </Divider>
          </div>
          {/* 费用 */}
          <div id="fees" className={styles['product-detail-container']}>
            <Divider orientation="center">
              <Typography.Title level={3}>产品费用</Typography.Title>
              <div dangerouslySetInnerHTML={{ __html: product?.feature }}></div>
            </Divider>
          </div>
          {/* 预订须知 */}
          <div id="notes" className={styles['product-detail-container']}>
            <Divider orientation="center">
              <Typography.Title level={3}>预订须知</Typography.Title>
              <div dangerouslySetInnerHTML={{ __html: product?.feature }}></div>
            </Divider>
          </div>
          {/* 商品评价*/}
          <div id="comments" className={styles['product-detail-container']}>
            <Divider orientation="center">
              <Typography.Title level={3}>商品评价</Typography.Title>
              <div>
                <ProductComments data={commentMockData}></ProductComments>
              </div>
            </Divider>
          </div>
        </div>
      </MainLayout>
    </>
  )
}
